<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />-->
<title>涛宝商城-登录</title>
<link rel="stylesheet" type="text/css"
	th:href="@{appstyle/css/mdui.css}" />
<link rel="stylesheet" type="text/css"
	th:href="@{appstyle/css/core.css}" />
<script type="text/javascript" th:src="@{appstyle/js/jquery-3.3.1.js}"></script>
<script type="text/javascript" th:src="@{appstyle/js/mdui.js}"></script>
</head>
<body>
<style>
* {
	margin: 0;
	padding: 0;
}

body {
	min-width: 1080px;
}

#denglu {
	margin: 0px auto;
	width: 400px;
	height: 280px;
	background-color: white;
	margin-top: 40px;
}

h1 {
	text-align: center;
	border-bottom: 1px solid #ddd;
	padding: 10px;
	font-size: 18px;
	font-weight: 700;
	color: #666;
	margin-bottom: 20px;
}

.input {
	padding: 10px 0 10px 0px;
	margin: 5px;
	margin-bottom: 13px;
	width: 308px;
	height: 18px;
	line-height: 18px;
	font-size: 15px;
	color: #333;
	outline: none;
	text-align: center;
}

.button {
	margin: 5px;
	width: 312px;
	padding: 6px 0;
	background-color: #66CCFF;
	color: white;
	font-size: 20px;
	cursor: pointer;
	border: 0;
}

#zuc {
	width: 325px;
	margin: 0 auto;
}

#logo {
	margin: 0 auto;
	width: 1080px;
	height: 60px;
}

.logo_1 {
	font-size: 25px;
	font-weight: bold;
	color: #66CCFF;
	position: relative;
	top: 10px;
	text-decoration: none;
}

#foot {
	height: 361px;
	margin: 0 auto;
	border: 1px solid #66CCFF;
	background-color: #66CCFF;
}

.zuce1 {
	padding: 0 5px;
	color: #666;
	text-decoration: none;
	font-size: 12px;
}

#zuce {
	margin: 8px auto 0;
	text-align: right;
	color: #666;
}

.zuce1:hover {
	color: #66CCFF;
}

#tail {
	width: 1080px;
	height: 60px;
	margin: 0 auto;
}

.p2 {
	text-align: center;
	margin-top: 15px;
	color: #666;
	font-size: 12px;
	cursor: pointer;
}
</style>
	<form>
		<div id="logo">
			<a class="logo_1" href="index.html">涛宝商城</a>
		</div>
		<div id="foot">
			<div id="denglu">
				<h1>用户登录</h1>
				<div id="zuc">
					<form action="">
						<input class="input" id="username" type="text"
							placeholder="请输入用户名" /><br /> <input class="input"
							id="password" type="password" placeholder="请输入密码" /><br /> <input
							class="button" id="loginBtn" type="button" value="登录" />
					</form>

					<div id="zuce">
						<a href="findPwd.html" class="zuce1">忘记密码</a> <a
							href="register.html" class="zuce1">免费注册</a>
					</div>
				</div>
			</div>
		</div>
		<div id="tail">
			<p class="p2">涛宝商城</p>
			<p class="p2">Copyright © 2019 taobaostore.top All Rights
				Reserved</p>
		</div>
	</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
  locationIndex=function(){
	  window.location.href="index.html";
  }
	// 登录按钮事件:
   $("#loginBtn").click(function(){
	   $.ajax({
		   url:"user/login.do",
		   Type:"post",
		   data:user={
				 username:$("#username").val(),
				 password:$("#password").val(),
		   },
		   dataType:"json",
		   success:function(data){
			   if(data.status==0){
				   mdui.snackbar({
					    message: '登录成功',
					    position: 'top',
					    timeout:100
				   });
				   var timeCount = 3;
				   countDown=function(){
					   if(timeCount==-1){
						   window.location.href="index.html";
					   }
					   mdui.snackbar({
						    message: "登录成功,"+timeCount+"秒自动后跳转:<a onclick='locationIndex()'>点击立刻登录</a>",
						    position: 'top',
						    timeout:1000
					   });
					   timeCount--;
				   } 
				   setInterval("countDown()", 1000);
			   }else{
				   mdui.snackbar({
					    message: data.msg,
					    position: 'top',
					    timeout:3000
				   });
			   }
		   }
	   })
   })
})
</script>
